<template>
    <div class="myOrderBox">
        <x-header :left-options="{showBack: true,backText:'我的订单'}" class="headerBox"></x-header>
        <!-- tab -->
        <tab v-model="index" default-color="#686868" active-color="#000" custom-bar-width="20px"
             bar-active-color="#1F7AFF"
             class="navTabBox">
            <tab-item v-for="(item, index) in listContent" :key="index">{{item.title}}</tab-item>
        </tab>
        <swiper v-model="index" :show-dots="false" ref="cateSwiper" :min-moving-distance="100"
                @on-get-height="getPageHeight">
            <swiper-item v-for="(item, index) in listContent" :key="index">
                <div class="softwareBox">
                    <ul class="softwareListBox clearfix">
                        <li v-for="(item2, index2) in paidOrders" :key="index2" class="lives" v-if="item.title=='已付款'">
                            <router-link :to="{name:'orderInfo',query:{id:item2.id}}" class="itemBox">
                                <div class="item-ans">
                                    <div class="courseImg" >
                                        <img class="img" v-if="item2.targetPicture !=null" :src="item2.targetPicture"/>
                                        <img class="img" v-else :src="item2.targetImage"/>
                                    </div>
                                    <div class="hotCourseInfo">
                                        <div class="hotCourseInfo_title">{{item2.targetName}}</div>
                                        <div class="mt_35">
                                            <span class="price_now">￥{{item2.amount/100}}</span>
                                            <span class="price_before">{{item2.amount/100}}</span>
                                        </div>
                                        <div v-if="item2.hotCourseInfo_Tag=='过期'"
                                             class="hotCourseInfoTag"
                                        >{{item2.hotCourseInfo_Tag}}
                                        </div>
                                    </div>
                                </div>
                                <div class="item-bottom">
                                    <img src="../assets/images/time321.png" mode="aspectFill"/>
                                    <div class="contentTime">{{item2.createTimeTimeStr}}</div>
                                    <div v-if="item.title=='已付款'" class="contentState1">{{item.title}}</div>
                                    <div v-if="item.title=='未付款'" class="contentState2">待支付</div>
                                    <div v-if="item.title=='已过期'" class="contentState3">{{item.title}}</div>
                                </div>
                            </router-link>
                        </li>
                        <li v-for="(item2, index2) in payOrders" :key="index2" class="lives" v-if="item.title=='未付款'">
                            <router-link :to="{name:'orderInfo',query:{id:item2.id}}" class="itemBox">
                                <div class="item-ans">
                                    <div class="courseImg" >
                                        <img class="img" v-if="item2.targetPicture !=null" :src="item2.targetPicture"/>
                                        <img class="img" v-else :src="item2.targetImage"/>
                                    </div>
                                    <div class="hotCourseInfo">
                                        <div class="hotCourseInfo_title">{{item2.targetName}}</div>
                                        <div class="mt_35">
                                            <span class="price_now">￥{{item2.amount/100}}</span>
                                            <span class="price_before">{{item2.amount/100}}</span>
                                        </div>
                                        <div v-if="item2.hotCourseInfo_Tag=='过期'"
                                             class="hotCourseInfoTag"
                                        >{{item2.hotCourseInfo_Tag}}
                                        </div>
                                    </div>
                                </div>
                                <div class="item-bottom">
                                    <img src="../assets/images/time321.png" mode="aspectFill"/>
                                    <div class="contentTime">{{item2.createTimeTimeStr}}</div>
                                    <div v-if="item.title=='已付款'" class="contentState1">{{item.title}}</div>
                                    <div v-if="item.title=='未付款'" class="contentState2">待支付</div>
                                    <div v-if="item.title=='已过期'" class="contentState3">{{item.title}}</div>
                                </div>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </swiper-item>
        </swiper>
    </div>
</template>

<script>
    import {XHeader, Tab, TabItem, Swiper, SwiperItem} from "vux";
    import {MyOrder} from '@/api/index/study';
    import store from "../store/store";


    export default {
        components: {
            XHeader,
            Tab,
            TabItem,
            Swiper,
            SwiperItem
        },
        data() {
            return {
                index: 0,
                payOrders: [],
                paidOrders: [],
                // 软件列表数据
                listContent: [
                    {
                        title: '已付款',
                        hotCourseList: [
                            {
                                courseImg: require("../assets/images/img02.png"),
                                hotCourseInfo_title: "爱语文，做有修养的人",
                                mark: "4.8",
                                peopleNum: "1210",
                                price_now: "399",
                                price_before: "￥499",
                                hotCourseInfo_tips: "(会员免费)",
                                hotCourseInfo_Tag: ""
                            },
                            {
                                courseImg: require("../assets/images/img02.png"),
                                hotCourseInfo_title: "爱语文，做有修养的人",
                                mark: "4.8",
                                peopleNum: "1210",
                                price_now: "399",
                                hotCourseInfo_tips: "(会员免费)",
                                hotCourseInfo_Tag: ""
                            }
                        ]
                    },
                    {
                        title: '未付款',
                        hotCourseList: [
                            {
                                courseImg: require("../assets/images/img02.png"),
                                hotCourseInfo_title: "爱语文，做有修养的人",
                                mark: "4.8",
                                peopleNum: "1210",
                                price_now: "399",
                                price_before: "￥499",
                                hotCourseInfo_tips: "(会员免费)",
                                hotCourseInfo_Tag: ""
                            },
                            {
                                courseImg: require("../assets/images/img02.png"),
                                hotCourseInfo_title: "爱语文，做有修养的人",
                                mark: "4.8",
                                peopleNum: "1210",
                                price_now: "399",
                                hotCourseInfo_tips: "(会员免费)",
                                hotCourseInfo_Tag: ""
                            },
                            {
                                courseImg: require("../assets/images/img02.png"),
                                hotCourseInfo_title: "爱语文，做有修养的人",
                                mark: "4.8",
                                peopleNum: "1210",
                                price_now: "399",
                                price_before: "￥499",
                                hotCourseInfo_tips: "(会员免费)",
                                hotCourseInfo_Tag: ""
                            },

                        ]
                    },
                    {
                        title: '已过期',
                        hotCourseList: [
                            {
                                courseImg: require("../assets/images/img02.png"),
                                hotCourseInfo_title: "爱语文，做有修养的人",
                                mark: "4.8",
                                peopleNum: "1210",
                                price_now: "399",
                                price_before: "￥499",
                                hotCourseInfo_tips: "(会员免费)",
                                hotCourseInfo_Tag: "过期"
                            },
                            {
                                courseImg: require("../assets/images/img02.png"),
                                hotCourseInfo_title: "爱语文，做有修养的人",
                                mark: "4.8",
                                peopleNum: "1210",
                                price_now: "399",
                                hotCourseInfo_tips: "(会员免费)",
                                hotCourseInfo_Tag: "过期"
                            },
                            {
                                courseImg: require("../assets/images/img02.png"),
                                hotCourseInfo_title: "爱语文，做有修养的人",
                                mark: "4.8",
                                peopleNum: "1210",
                                price_now: "399",
                                price_before: "￥499",
                                hotCourseInfo_tips: "(会员免费)",
                                hotCourseInfo_Tag: "过期"
                            },
                            {
                                courseImg: require("../assets/images/img02.png"),
                                hotCourseInfo_title: "爱语文，做有修养的人",
                                mark: "4.8",
                                peopleNum: "1210",
                                price_now: "399",
                                hotCourseInfo_tips: "(会员免费)",
                                hotCourseInfo_Tag: "过期"
                            }
                        ]
                    }
                ]
            };
        },
        created() {
            MyOrder(this.$store.state.user.id).then(res => {
                console.log(res.data.data)
                this.payOrders = res.data.data.payOrders;
                this.paidOrders = res.data.data.paidOrders;
            }).catch(err => {
                console.log(err)
            });

        },
        methods: {
            // onItemClick(index) {
            //   this.index = !this.index;
            // },
            getPageHeight() {
                let topHeight = document.getElementsByClassName("vux-slider")[0]
                        .offsetTop,
                    diffHeight = window.screen.height - topHeight;
                this.$nextTick(() => {
                    this.$refs.cateSwiper.xheight = diffHeight + "px";
                });
                // console.log(topHeight, diffHeight, this.$refs.cateSwiper.xheight)
            }
        }
    };
</script>

<style lang="less" scoped>
    .myOrderBox {
        // 头部导航
        /deep/ .headerBox {
            background-color: #fff;
            border-bottom: 1px solid #eee;

            .vux-header-left {
                left: 24px;

                .vux-header-back {
                    color: #000;
                }

                .left-arrow:before {
                    border-color: #000;
                }
            }
        }

        /deep/ .navTabBox {
            border-bottom: 20px solid #f7f8f9;

            .vux-tab-item {
                background-size: 100% 0px;
            }
        }

        /deep/ .vux-swiper {
            overflow-y: auto;
        }

        .softwareBox {
            .softwareListBox {
                margin: 0;
                list-style: none;

                li {
                    border-bottom: 20px solid #f7f8f9;

                    .itemBox {
                        color: currentColor;

                        .item-ans {
                            width: 100%;
                            display: flex;
                            padding: 30px;
                            box-sizing: border-box;
                            background-color: #fff;
                        }

                        .courseImg img {
                            width: 300px;
                            // height: 100%;
                            height: 190px;
                            display: block;
                        }

                        .hotCourseInfo {
                            margin-left: 30px;
                        }

                        .hotCourseInfo_title {
                            font-size: 30px;
                            margin-top: 10px;
                            margin-bottom: 80px;
                        }

                        .hotCourseInfo_count {
                            font-size: 24px;
                            color: #9d9d9d;
                            margin-top: 10px;
                        }

                        .price_now {
                            color: #f14927;
                            font-size: 36px;
                        }

                        .price_before {
                            font-size: 22px;
                            color: #a5a5a5;
                            text-decoration: line-through;
                        }

                        .hotCourseInfo_tips {
                            font-size: 24px;
                            color: #b48a59;
                            margin-left: 24px;
                        }

                        .hotCourseInfoTag {
                            background-color: #cccccc;
                            color: #fff;
                            border-radius: 10px;
                            padding: 5px 10px;
                            width: 90px;
                            height: 40px;
                            line-height: 40px;
                            font-size: 30px;
                            text-align: center;
                        }

                        .item-bottom {
                            border-top: 1px solid #f7f7f9;
                            padding: 20px;
                            display: flex;
                            align-items: center;
                            background-color: #fff;
                        }

                        .item-bottom img {
                            width: 25px;
                            height: 25px;
                            margin-right: 20px;
                        }

                        .contentTime {
                            color: #d3d3d3;
                            font-size: 24px;
                        }

                        .contentState1 {
                            margin-left: auto;
                            padding: 5px 20px;
                            color: #ef6418;
                            font-size: 30px;
                        }

                        .contentState2 {
                            margin-left: auto;
                            border: 2px solid #ffc9ac;
                            border-radius: 40px;
                            padding: 5px 20px;
                            color: #ef6418;
                            font-size: 30px;
                        }

                        .contentState3 {
                            margin-left: auto;
                            padding: 5px 20px;
                            color: #767676;
                            font-size: 30px;
                        }
                    }
                }
            }
        }
    }
</style>